import { truthy } from '@gnlab/utils'
import { Modal, Steps } from 'antd'
import Loading from '@/desktop/components/Loading'
import { useQywxsForChoose, type QywxForChooseExtra } from '@/desktop/logics/config-choosing-qywxs'
import services from '@/services'
import type {
  BaseBatchApplyConfig,
  BatchApplyConfig,
  BatchApplyConfigQywx,
  BaseBatchApplyGroup,
} from '@/services/features/group-batch-apply'
import { getEmptyBatchApplyConfig } from '@/services/features/group-batch-apply'
import ChooseGroups from './ChooseGroups'
import ChooseQywxs from './ChooseQywxs'
import EditConfig from './EditConfig'
import './index.module.less'

export interface EditingConfig extends BaseBatchApplyConfig {
  id?: number
}

export type EditingQywx = BatchApplyConfigQywx & QywxForChooseExtra

export default function TaskDetailModal(props: {
  editing?: false | true | BatchApplyConfig
  onFinish: () => void
}) {
  const { editing, onFinish } = props

  const title = truthy(editing) ? (editing === true ? '新建群内批量加人' : '编辑群内批量加人') : ''

  return <Modal
    title={title}
    footer={null}
    width="800px"
    open={truthy(editing)}
    onCancel={onFinish}
    maskClosable={false}
    destroyOnClose
  >
    {truthy(editing) ? <Content editing={editing} onFinish={onFinish} /> : null}
  </Modal>
}

enum EditSteps {
  ChooseQywxs = 0,
  ChooseGroups = 1,
  Config = 2,
}

function Content(props: { editing: true | BatchApplyConfig; onFinish: () => void }) {
  const { editing, onFinish } = props

  const [step, setStep] = useState(EditSteps.ChooseQywxs)
  const [config, setConfig] = useState<EditingConfig>(() =>
    editing === true ? getEmptyBatchApplyConfig() : editing,
  )
  const prevStep = useCallback(
    (editedConfig?: Partial<EditingConfig>) => {
      if (editedConfig) setConfig({ ...config, ...editedConfig })
      if (step !== EditSteps.ChooseQywxs) setStep(step - 1)
    },
    [step, config],
  )

  const qywxs = useQywxsForChoose(
    editing === true ? null : editing.id,
    async (configId?: number) => services.features.groupBatchApply.getQywxListForConfig(configId),
    qywx => qywx.configId,
  )

  const choosedQywxs = useCallback(
    (wxids: string[]) => {
      setConfig({
        ...config,
        wxids,
        groups: config.groups.filter(item => wxids.includes(item.ownerWxid)), // 重选企业微信后，需排除不再选中的企业微信的群
      })
      setStep(EditSteps.ChooseGroups)
    },
    [config],
  )

  const choosedGroups = useCallback(
    (groups: BaseBatchApplyGroup[]) => {
      setConfig({ ...config, groups })
      setStep(EditSteps.Config)
    },
    [config],
  )

  return <div>
    <div styleName="steps-wrap">
      <Steps current={step}>
        <Steps.Step title="选择企微账号" />
        <Steps.Step title="选择群聊" />
        <Steps.Step title="加人设置" />
      </Steps>
    </div>

    {!qywxs ? <Loading /> : null}
    {qywxs && step === EditSteps.ChooseQywxs ? (
      <ChooseQywxs qywxs={qywxs} wxids={config.wxids} choosed={choosedQywxs} />
    ) : null}
    {qywxs && step === EditSteps.ChooseGroups ? (
      <ChooseGroups
        wxids={config.wxids}
        qywxs={qywxs}
        groups={config.groups}
        goPrev={prevStep}
        choosed={choosedGroups}
      />
    ) : null}
    {qywxs && step === EditSteps.Config ? (
      <EditConfig config={config} goPrev={prevStep} onFinish={onFinish} />
    ) : null}
  </div>
}
